<style>
    .layui-form-label {
        padding-right: 4vw;
    }

    .layui-inline input {
        width: 16vw;
    }

    .layui-card {
        box-shadow: 1px 2px 3px 1px rgb(191, 187, 187);
    }

    .layui-card-body {
        display: flex;
        white-space: nowrap;
        flex-direction: column;
        align-content: center;
        flex-wrap: wrap;
        align-items: center;
    }
    .layui-layer-loading .layui-layer-content{
        width: 100%;
    }
</style>

<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="  layui-form" style="padding: 30px;">
            <div class="layui-row">
                <div class="layui-card">
                    <fieldset class="layui-elem-field layui-field-title loukou-title" style="margin-top: 20px;">
                        <legend>FTP远程升级</legend>
                    </fieldset>
                    <div class="layui-card-body">
                        <div class="layui-form-item layui-hide">
                            <label class="layui-form-label">ID</label>
                            <div class="layui-inline">
                                <input type="text" name="ID" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">FTPIP地址</label>
                            <div class="layui-inline">
                                <input type="text" name="FTPIP" autocomplete="off" lay-verify="required"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">FTP端口</label>
                            <div class="layui-inline">
                                <input type="text" name="FTPPORT" autocomplete="off" lay-verify="required"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">FTP模式</label>
                            <div class="layui-inline">
                                <input type="radio" name="ftpmod" value="1" title="账号密码登录"
                                    lay-filter="demo-radio-filter">
                                <input type="radio" name="ftpmod" value="0" lay-filter="demo-radio-filter" title="匿名登录">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">FTP用户名</label>
                            <div class="layui-inline">
                                <input type="text" name="FTPUN" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">FTP密码</label>
                            <div class="layui-inline">
                                <input type="text" name="FTPPW" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">FTP文件名称</label>
                            <div class="layui-inline">
                                <input type="text" name="FTPFN" autocomplete="off" lay-verify="required"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue"
                                lay-submit lay-filter="save">保存数据</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-submit
                                lay-filter="upgrade">系统升级</button>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <fieldset class="layui-elem-field layui-field-title loukou-title" style="margin-top: 20px;">
                        <legend>本地升级</legend>
                    </fieldset>
                    <div class="layui-card-body">
                        <div class="layui-btn-container">
                            <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-choose"
                                lay-options="{
                                field:'upload_file',
                                accept: 'file'
                              }">选择文件</button>
                            <button type="button" class="layui-btn" id="ID-upload-demo-action">开始上传</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/api.js" charset="utf-8"></script>
<script src="../js/ajaxRequest.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'upload','layer'], function () {
        var upload = layui.upload;
        var layer = layui.layer;
        // 渲染
      
       upload.render({
            elem: '#ID-upload-demo-choose',
            url: '/System/UploadUpgrade',
            auto: false,
            // multiple: true,
            bindAction: '#ID-upload-demo-action',
            before: function(obj){
                layer.load(3, {
                    content: '加载中...', // 自定义加载文本
                    shade: [0.4, '#fff'], // 遮罩透明度
                    time: 30 * 1000,
                });
            },
            done: function (res) {
                layer.closeAll('loading'); // 关闭所有的加载层
                if (res.success) {
                    layer.msg(res.data, {
                        icon: 1
                    })
                } else {
                    layer.msg(res.msg, {
                        icon: 2
                    })
                }
            }
        });

        var form = layui.form;
        form.render();
        // 提交事件
        form.on('submit(save)', function (data) {
            //发送数据           
            var field = data.field; // 获取表单字段值        
            field.ID = parseInt(field.ID)
            if (field.ftpmod == "1") {
                if (field.FTPUN == "") {
                    layer.msg("账号必填", {
                        icon: 2,
                        time: 500
                    })
                    return
                }
                if (field.FTPPW == "") {
                    layer.msg("密码必填", {
                        icon: 2,
                        time: 500
                    })
                    return
                }
            }
            var obj = { SysUpgrade: field }
            EditSysUpgrade(obj)
        })
        // radio 事件
        form.on('radio(demo-radio-filter)', function (data) {
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            if (value == 0) {
                //匿名登录
                $("[name='FTPUN']").attr("disabled", true)
                $("[name='FTPPW']").attr("disabled", true)

            } else {
                $("[name='FTPUN']").removeAttr("disabled")
                $("[name='FTPPW']").removeAttr("disabled")
            }
        });
        form.on('submit(upgrade)', function (data) {
            upgrade()
        })
        loadData()
        function loadData() {
            GetSysUpgrade().then(function (responseData) {
                var data = responseData.data
                if (data != null) {
                    for (var key in data) {
                        if (key == "FTPMOD") {
                            if (data.FTPMOD === "1") {
                                $("input[name='ftpmod'][value='1']").prop("checked", true);
                            } else {

                                $("input[name='ftpmod'][value='0']").prop("checked", true);
                            }
                            form.render()
                        } else {
                            $("[name='" + key + "']").val(data[key]);
                        }
                    }
                }
            })
        }
        function upgrade() {
            layer.confirm('确认升级？升级前请确认信息已保存', function (index) {
                var loadingIndex = layer.load(3, {
                    content: '升级中...', // 自定义加载文本
                    shade: [0.4, '#fff'], // 遮罩透明度
                   // time: 5*1000,
                });
                FTPUpgrade().then(function (deleteresponseData) {
                    layer.close(loadingIndex);
                })
                layer.close(index);
            });
        }
    });
</script>